<template>
	<view class="wrap-category-list flex">
		<block v-for="(item, index) in ((list.length > 10 && isShowMore === false) ? list.slice(0, 9) : list)" :key="index">
			<view class="item flex column align-center just-center" @click="onItem(item)">
				<image class="img" :src="$getImageURL(item.image)" />

				<view class="name f-24">{{ item.name }}</view>
			</view>
		</block>
		
		<view class="item flex column align-center just-center" @click="onMore" v-if="list.length > 10">
			<image class="img" :src="$staticImagePath('template/gdfl.png')" />
		
			<view class="name f-24">{{ isShowMore ? "收起分类" : "更多分类" }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				isShowMore: false,
			}
		},
		methods: {
			/**
			 * 更多
			 */
			onMore() {
				this.isShowMore = !this.isShowMore;
			},
			/**
			 *
			 */
			onItem(item) {
				this.$jump.to(
					`/pages/home/article/list?title=${item.name}&parent_id=${item.id}`
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-category-list {
		width: 100%;
		overflow: hidden;
		border-radius: 20rpx;
		background-color: white;
		flex-wrap: wrap;
		padding: 15rpx 0rpx;

		.item {
			width: 20%;
			padding: 18rpx 0rpx;
			overflow: hidden;
			gap: 17rpx;

			.img {
				width: 88rpx;
				height: 88rpx;
			}

			.name {
				color: #666666;
			}
		}
	}
</style>
